<template>
  <div v-loading="loading">
    <panel-group :studentData="studentData" />
    <el-row>
      <el-col
        :sm="24"
        :md="24"
        :lg="24"
        :xl="24"
        style="background:#fff;padding:20px 30px 0;margin-top:20px"
      >
        <product-chart />
      </el-col>
    </el-row>

    <el-row :gutter="20" v-if="local==2">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <address-chart :studentData="studentData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <staff-chart :studentData="studentData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <intention-chart />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-else-if="local!=2">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <intention-chart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./components/Panel";
import ProductChart from "./components/ProductChart";
import AddressChart from "./components/AddressChart";
import StaffChart from "./components/StaffChart";
import IntentionChart from "./components/IntentionChart";

export default {
  data() {
    return {
      loading: true,
      local: localStorage.position,
      studentData: []
    };
  },
  components: {
    PanelGroup,
    ProductChart,
    AddressChart,
    StaffChart,
    IntentionChart
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 900);
    this.axios.get("/student").then(res => {
      this.studentData = res.data.data;
    });
  }
};
</script>

<style scoped>
.chart-wrapper {
  background: #fff;
  padding: 0 16px 0;
  margin-bottom: 32px;
  margin-top: 20px;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>